﻿@{
    ViewData["Title"] = "AngularJS前端基础";
    Layout = "~/Views/Shared/_FormGray.cshtml";
}

<!DOCTYPE html>
<html ng-app="myNoteApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS 示例</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title" style="background-color:lightblue;border-radius:4px">
                    <h5><i class="fa fa-file-code-o"></i> AngularJS:改变HTML图像属性</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div ng-controller="myTest" class="ibox-content" style="height:350px;font-size:14px;border-radius:4px;box-shadow: 6px 6px 3px #888888">
                    <img id="myimage" ng-click="changeImage()" src="/image/pic_bulboff.gif" width="100" height="180">
                    <p> <button ng-click="changeImage()" class="btn btn-primary btn-sm">改变</button></p>
                    <p>点击灯泡就可以打开或关闭这盏灯</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title" style="background-color:steelblue;color:white;border-radius:4px;">
                    <h5><i class="fa fa-file-code-o"></i> AngularJS 笔记本</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link"> <i class="fa fa-chevron-up"></i></a>
                        <a class="close-link"><i class="fa fa-times-circle"></i> </a>
                    </div>
                </div>
                <div class="ibox-content" style="height: 350px; font-size: 14px; color: black; border-radius: 4px; box-shadow: 6px 6px 3px #888888">
                    <div ng-controller="myNoteCtrl">
                        <h5>我的笔记</h5>
                        <p><textarea ng-model="message" cols="60" rows="8"></textarea></p>
                        <p>
                            <button ng-click="save()" class="btn btn-primary btn-sm">保存</button>
                            <button ng-click="clear()" class="btn btn-primary btn-sm">清除</button>
                        </p>
                        <p>Number of characters left: <span ng-bind="left()"></span></p>
                    </div>
                </div>
            </div>
        </div>

    
        <script>
            var app = angular.module("myNoteApp", []);
            app.controller("myNoteCtrl", function ($scope) {
                $scope.message = "";
                $scope.left = function () { return 100 - $scope.message.length; };
                $scope.clear = function () { $scope.message = ""; };
                $scope.save = function () { alert("Note Saved"); };
            });
            app.controller("myTest", function ($scope) {
                $scope.name = "Kingmo";
                $scope.cNumber = 200;
                $scope.cDate = Date();
                $scope.clear = function () {
                    $scope.name = "";
                    $scope.cDate = "";
                    $scope.cNumber = 0; changeImage
                    $scope.cCheckbox = false;
                };
                $scope.save = function () { alert("数据已经保存"); };
                $scope.changeImage = function () {
                    element = document.getElementById('myimage')
                    if (element.src.match("bulbon")) {
                        element.src = "/image/pic_bulboff.gif";
                    }
                    else {
                        element.src = "/image/pic_bulbon.gif";
                    };
                };

            });
        </script>
    </div>
</body>

</html>
